<template>
	<view class="center">
		<hea-ders title="筛选">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<view class="ima" slot='official' @click="Sizer">
				<text>重置</text>
			</view>
		</hea-ders>
		<view class="clint">
			<view class="clint_rank">
				<text>客户级别</text>
				<view class="select" @click="select">
					<text>选择</text>
					<image v-if="flag" src="../../../../static/images/arrow_right.png" mode="widthFix"></image>
					<image v-else src="../../../../static/images/arrow_right.png" style="transform: rotate(90deg);" mode="widthFix"></image>
				</view>
			</view>
			<view class="clint_collar" v-if="!flag">
				<text @click="clint('1')">客户级别</text>
				<image v-if="'1' == coent" src="../../../../static/images/1333.png" mode="widthFix"></image>
			</view>
			<view class="clint_collar" v-if="!flag">
				<text @click="clint('2')">零售客户</text>
				<image v-if="'2' == coent" src="../../../../static/images/1333.png" mode="widthFix"></image>
			</view>
			<view class="clint_rank" >
				<text>经手人</text>
				<view class="select" @click="office">
					<text>选择</text>
					<image  src="../../../../static/images/arrow_right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="clint_rank">
				<text>推广人</text>
				<view class="select" @click="office">
					<text>选择</text>
					<image  src="../../../../static/images/arrow_right.png" mode="widthFix"></image>
					
				</view>
			</view>
			<view class="partition">
				<view class="clint_rank">
					<text>新增时间（起）</text>
					<view class="select">
						<!-- <text>选择</text> -->
						<view class="value">
							<biaofun-datetime-picker 
							placeholder="请选择发布时间" 
							defaultValue="2020-06-08" 
							fields="day" 
							@change="changeDatetimePicker">
							</biaofun-datetime-picker>
						</view>
						<image src="../../../../static/images/s35.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="clint_rank">
					<text>新增时间（止）</text>
					<view class="select">
						<!-- <text>选择</text> -->
						<view class="value">
							<biaofun-datetime-picker 
							placeholder="请选择发布时间" 
							defaultValue="2020-06-08" 
							fields="day" 
							@change="changeDatetimePicker">
							</biaofun-datetime-picker>
						</view>
						<image  src="../../../../static/images/s35.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="partition">
				<view class="clint_rank">
					<text>最近交易时间（起）</text>
					<view class="select">
						<!-- <text>选择</text> -->
						<view class="value">
							<biaofun-datetime-picker 
							placeholder="请选择发布时间" 
							defaultValue="" 
							fields="day" 
							@change="changeDatetimePicker">
							</biaofun-datetime-picker>
						</view>
						
						<image  src="../../../../static/images/s35.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="clint_rank">
					<text>最近交易时间（止）</text>
					<view class="select">
						<!-- <text>选择</text> -->
						<view class="value">
							<biaofun-datetime-picker 
							placeholder="请选择发布时间" 
							:defaultValue="''" 
							fields="day" 
							@change="changeDatetimePicker">
							</biaofun-datetime-picker>
						</view>
						
						<image  src="../../../../static/images/s35.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<button type="primary">确定</button>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			biaofunDatetimePicker,
			heaDers
		},
		data() {
			return {
				defaultValue: '',
				flag:true,
				coent:1,
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			changeDatetimePicker(date) {
				console.log('选择的日期时间数据：', date);
			},
			select(){
				this.flag = !this.flag
			},
			clint(index){
				console.log(index)
				this.coent = index
			},
			office(){
				uni.navigateTo({
					url:'../office/office'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.center{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background: #fff;
	.title {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: rgba(36, 153, 246, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		image {
			width: 22rpx;
		}
	
		text {
		
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			font-family: PingFang SC;
		}
	
		.ima {
			text{
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:33rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				margin-right: 30rpx;
			}
			image {
				width: 40rpx;
				vertical-align: middle;
			}
		}
	}
	.clint{
		width: 100%;
		background-color: #F5F5F5;
		box-sizing: border-box;
		.partition{
			margin-top: 20rpx;
			.clint_rank{
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #e0e0e0;
				background: #fff;
				text{
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:40rpx;
					color:rgba(66,66,66,1);
					opacity:1;
					margin-right: 20rpx;
				}
				.select{
					display: flex;
					align-items: center;
					text{
						font-size:30rpx;
						font-family:PingFang SC;
						font-weight:500;
						line-height:40rpx;
						color:rgba(158,158,158,1);
						opacity:1;
						
					}
					image {
						margin-left: 10rpx;
						width: 30rpx;
						vertical-align: middle;
					}
					.value {
						flex: 1;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(66, 66, 66, 1);
						opacity: 1;
					}
				}
			}
		}
		.clint_rank{
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e0e0e0;
			background: #fff;
			text{
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:40rpx;
				color:rgba(66,66,66,1);
				opacity:1;
				margin-right: 20rpx;
			}
			.select{
				text{
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:40rpx;
					color:rgba(158,158,158,1);
					opacity:1;
				}
				image {
					width: 25rpx;
					vertical-align: middle;
				}
			}
		}
		.clint_collar{
			position: relative;
			text-align: center;
			width: 100%;
			background: #FCFCFC;
			box-sizing: border-box;
			height: 88rpx;
			border-bottom: 1rpx solid #e0e0e0;
			text{
				display: inline-block;
				width: 100%;
				height: 100%;
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:88rpx;
				color:rgba(158,158,158,1);
				opacity:1;
			}
			image {
				position: absolute;
				top: 0;
				right: 0;
				width: 88rpx;
			}
		}
	}
	button{
		border-radius: 0;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}
}
</style>
